<template>
	<view class="main">
		<custom @showTopDailog="showTopDailog"></custom>
		<view class="main_containers">
			<pageTitle name="艺人介绍" :navBarArr="navBarArr"></pageTitle>
			<view class="artistsContainers">
				<view class="artistsContainers_item">
					 <view class="artistsContainers_item_topRot">
					<!-- <view class="artistsContainers_item_top" :style="{color:colorArr[currentIndex%3],borderColor:colorArr[currentIndex%3]}">
						
							DAY{{currentIndex}}
					</view> -->
					</view>
					<view class="artistsContainers_item_info display_flex-center">
						<view class="artistsContainers_item_info_title" style="color:rgba(53, 112, 65, 1);">
							{{day}}
						</view>
						<view class="artistsContainers_item_info_dec">
							ARTISTS
						</view>
					</view>
					<view class="artistsContainers_item_content">
						<view class="artistsContainers_item_content_title">
							{{detailInfo.name}}
						</view>
						<view class="artistsContainers_item_content_info" v-html="detailInfo.introduction">
							
						</view>
					</view>
					<view class="artistsContainers_item_btn display_flex-center acitve" @tap="goToIndex(detailInfo.officialWebsite)">
						<view class="artistsContainers_item_btn_icon">
							<image src="@/static/website.png" class="artistsContainers_item_btn_icon_img"></image>
						</view>
						<view class="artistsContainers_item_btn_text">
							官方网站
						</view>
					</view>
					<!-- <view class="">
						<playList></playList>
					</view> -->
					<view class="artistsContainers_item_btn display_flex-center " @tap="goToIndex()">
						<view class="artistsContainers_item_btn_icon">
							<image src="@/static/pre.png" class="artistsContainers_item_btn_icon_img"></image>
						</view>
						<view class="artistsContainers_item_btn_text">
							返回首页
						</view>
					</view>
				</view>
			</view>
		</view>	
		<footerContainer></footerContainer>
		<!-- 弹窗 -->
		<topDailog v-if="topDailogStatus" @closed="topDailogStatus=false"></topDailog>

	</view>
</template>

<script>
	import topDailog from '@/components/common/topDailog.vue';
	import pageTitle from '@/components/common/pageTitle.vue';
	import footerContainer from '@/components/common/footer.vue';
	import playList from '@/components/index/playList.vue';
	import {
		mapMutations
	} from 'vuex'


	export default {
		components: {
			topDailog,
			footerContainer,
			pageTitle,
			playList
		
		},
		data() {
			return {
				detailInfo:{},
				colorArr:[
					'rgba(53, 112, 65, 1)',
					'rgba(27, 28, 128, 1)',
					'rgba(234, 11, 42, 1)',
					
				],
				actorId:'',
				day:'',
				currentIndex:1,
				topDailogStatus: false,
               navBarArr: [{
						id: '1',
						name: "首页"
					},
					{
						id: '2',
						name: "演员"
					},{
						id: '3',
						name: "莫福尼卡"
					}
               ],
			}
		},
		onShow() {
          this.getnewDetail()
		},
		onLoad(options) {
			let _this = this
			this.actorId=options.actorId
			this.day=options.day
			this.currentIndex=options.index
            
		},
		onReady() {



		},
		methods: {
			goToIndex(url){
				if(url){
					location.href=url
				}else{
					uni.reLaunch({
						url: '/pages/index/index'
					});
				}
				
			},
			getnewDetail(){
				// newsId:this.id
				this.$http.Get(`${this.$api.getActorInfo}/${this.actorId}`,{}, (res) => {
					console.log(res)
					let data = res
				   
				   this.detailInfo=data
				   this.navBarArr[2].name=data.name
				})
			},
			showTopDailog() {
				this.topDailogStatus = true
			}
		},
	}
</script>

<style scoped lang="scss">
	.main {
		min-height: 100vh;
		position: relative;
		padding-bottom: 320rpx;
        background-image: url("../../static/bg_middle.png");
		background-size:100% 100%;
		.artistsContainers{
			&_item{
				&_topRot{
					transform: rotate(-10deg);
				}
				&_top{
					text-align: center;
					 width:100rpx;
					height:48rpx;
					display: block;
					font-size:28rpx;
					font-weight:700;
					line-height: 44rpx;
					margin:20rpx auto;
					border: 2px solid #fff;
					border-radius: 2px;
					transform: skew(-30deg);
					&_img{
						width:100%;
						height:100%;
					}
				}
				&_info{
					&_title{
						font-size:64rpx;
						line-height: 75rpx;
						height:75rpx;
						font-weight: 700;
					}
						
					&_dec{
						margin-left:16rpx;
						font-size:40rpx;
						height:48rpx;
						line-height: 48rpx;
						font-weight: 700;
						
					}
				}
				&_content{
					margin-top:20rpx;
					
					&_title{
						font-size:48rpx;
						line-height: 72rpx;
						font-weight:700;
						text-align: center;
					}
					&_info{
						padding:32rpx;
						font-size:32rpx;
						line-height: 48rpx;
						color:rgba(0, 0, 0, 0.80);
						::v-deep img{
							width:100%;
							margin-bottom:40rpx;
						}
					}
				}
			
				&_btn{
					width:154rpx;
					height:48rpx;
					border:1px solid rgba(234, 11, 42, 1);
					background-color: #fff;
					border-radius: 48rpx;
					margin:20rpx auto;
					&_icon{
						width:32rpx;
						height:32rpx;
						margin-right:8rpx;
						&_img{
							width:32rpx;
							height:32rpx;
						}
					}
					&_text{
						color:rgba(234, 11, 42, 1);
					}
				}
				&_btn.acitve{
					border:1px solid rgba(51, 51, 51, 1);
					.artistsContainers_item_btn_text{
						color:rgba(51, 51, 51, 1);
					}
				}
			
			}
		}
	}
</style>